<template>
    <div class="flowerList">
        <div class="flowerList_box">
            <div class="category_list">
                <span @click="categoryChange(index,$event)" :class="{'active':activeIndex == index}"
                    v-for="(category,index) in categoryList" :key="index" class="category">{{category}}</span>
            </div>
            <div class="flower_box">
                <el-row>
                    <el-col :span="6" v-for="(flower,index) in flowerPage" :key="index" class="boox_col">
                        <div class="item">
                            <img :src="flower.cover" @click="detail(flower)" alt="图片加载出错" class="cover">
                            <div class="information">
                                <span>{{flower.flowerName}}</span>
                               
                            </div>
                            <div class="information">
                                <el-tag type="success">{{flower.price}}元</el-tag>
                                <el-tooltip effect="light" content="加入购物车" placement="right">
                                    <el-button type="success" @click="addCart(flower)" size="mini"
                                        icon="el-icon-shopping-cart-2"></el-button>
                                </el-tooltip>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-pagination class="pagination" :current-page="page.currentPage" :page-sizes="[8, 16, 24]"
                :page-size="page.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="prev, pager, next, jumper, ->, sizes, total" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        name: 'flowerList',
        data() {
            return {
                flowerPage: [],//存储当前页面的花卉列表。
                page: {
                    currentPage: 1,//当前页码
                    pageSize: 8,//每页显示条目数
                    total: 0,//总条目数
                },
                activeIndex: 0,//存储当前激活的分类索引。
            }
        },
        methods: {
            //根据当前页码和每页显示条目数从 flowerList 中截取当前页面的花卉列表。
            getflowerPage() {
                let start = (this.page.currentPage - 1) * (this.page.pageSize);
                let end = this.page.pageSize * this.page.currentPage;
                this.flowerPage = this.flowerList.slice(start, end);
            },
            //设置总条目数为 flowerList 的长度。
            getTotal() {
                this.page.total = this.flowerList.length;
            },
            //处理每页显示条目数变化，更新 pageSize 并重新获取当前页面的花卉列表。
            handleSizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.getflowerPage();
            },
            //处理当前页码变化，更新 currentPage 并重新获取当前页面的花卉列表。
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.getflowerPage();
            },
            //处理分类变化，更新 activeIndex 并根据选中的分类过滤 flowerList，然后更新 flowerPage 和 page.total。
            categoryChange(index, event) {
                this.activeIndex = index
                let type = event.target.innerHTML;
                if (type == '全部分类') {
                    this.getflowerPage();
                    this.getTotal();
                } else {
                    let newflowerList = this.flowerList.filter((item) => {
                        if (item.type == type) return true
                    })
                    this.page.total = newflowerList.length;
                    this.flowerPage = newflowerList;
                }
            },
            //查看花卉详情的方法，跳转路由
            detail(flower) {
                this.$router.push('/flower')
                this.$store.commit('DETAIL', flower)
            },
            //根据搜索关键字 key 过滤 flowerList
            search(key) {
                this.flowerPage = this.flowerList.filter((item) => {
                    if (item.flowerName.indexOf(key) == 0) return true
                })
                this.page.total = this.flowerPage.length;
            },
            //添加到购物车
            addCart(flower) {
                this.$store.commit('ADDCART', flower);
                this.$message({
                    type: 'success',
                    message: '添加购物车成功'
                });
            }
        },
        mounted() {
            //调用 getflowerPage 和 getTotal 方法来初始化花卉列表和总条目数。
            this.getflowerPage();
            this.getTotal();
        },
        computed: {
            //将Vuex的 flowerList 和 categoryList 状态映射到组件的计算属性。
            ...mapState({
                flowerList: (state) => state.flowerList,
                categoryList: (state) => state.categoryList,
            }),
        },
    }
</script>

<style scoped>
    .flowerList {
        display: flex;
        justify-content: center;
        text-align: center;
        background: #eee;
    }  /** 底部旁白*/

    .flowerList_box {
        background: white;
    }  /**订单背景颜色*/

    .category_list {
        width: 1150px;
        height: 50px;
    }

    .category {
        font-size: 16px;
        padding: 10px 30px;
        line-height: 50px;
        font-weight:800;
    }

    .category:hover {
        color: #27ae60;
        border-bottom: 2px solid #2ecc71;
        cursor: pointer;
        font-weight:800;
    }

    .active {
        color: #27ae60;
        border-bottom: 2px solid #2ecc71;
    }

    .flower_box {
        width: 1150px;
    }

    .boox_col {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .item {
        padding: 10px 15px;
        border: 2px #eeeeee solid;
        width: 200px;
    }

    .item:hover {
        box-shadow: 0 0 10px #ddd;
    }

    .cover {
        width: 200px;
        height: 200px;
    }

    .information {
        display: flex;
        justify-content: space-between;
        font-weight:600;
        font-size: 16px;      
        padding-top: 20px;
    }

    .pagination {
        text-align: center;
        padding: 30px 100px;
    }
</style>